<!--  -->
<template>
<div class="release-setting">
    <h2 class="title" >红包问题设置</h2>
    <div class="blessing">
        <h4>红包祝福，限制四字（必填）</h4>
        <input type="text" maxlength="4" placeholder="例：恭喜发财" v-model="userinfo.text">
    </div>
    <div class="coding">
        <h4>红包口令：</h4>
        <P>打开支付宝搜索 - 红包 - 口令红包 - 输入你的口令</P>
        <input type="Number" maxlength="8" v-model="userinfo.coding">
    </div>
    <div class="theme">
        <h4>选择皮肤主题</h4>
        <div class="ui-form-item ui-border-b">
            <div class="ui-select-group">
                <div class="ui-select">
                    <select v-model="userinfo.backpostion">
                        <option value="1"  selected="">默认样式</option>
                        <option value="2"  >企鹅 乖</option>
                        <option value="3" >王者 妲己</option>
                        <option value="4" >王者 孙悟空</option>
                        <option value="5" >企鹅 给爷乐一个</option>
                        <option value="6" >高</option>
                        <option value="7" >妹子先抢</option>
                        <option value="8" >毛熊 乖</option>
                        <option value="9" >小屁孩 赞</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="choose">
        <h3>单选题</h3>
        <h4>设置问题：</h4>
        <input type="text" maxlength="18" class="long" v-model="userinfo.problem.firstchoose[0]">
        <h4>正确答案：</h4>
        <input type="text" maxlength="15" v-model="userinfo.problem.firstchoose[1]">
        <h4>错误答案：</h4>
        <input type="text" maxlength="15" v-model="userinfo.problem.firstchoose[2]">
    </div>
    <div class="allproblem">
        <h3>问答题</h3>
        <p>为了保证答题的通过性，请设置具有唯一答案的一般疑问句</p>
        <ul>
            <li>
                <h4>设置问题：</h4>
                <input type="text" placeholder="例：中国古代谁发明了活字印刷术？" maxlength="18" class="long" v-model="userinfo.problem.problemset[0]">
                <h4>答案：</h4>
                <input type="text" placeholder="毕昇" maxlength="15" class="long" v-model="userinfo.results.problemset[0]">
            </li>
            <li v-for="item in num" :key="item">
                <h4>设置问题：</h4>
                <input type="text" maxlength="18" class="long" v-model="userinfo.problem.problemset[item]">
                <h4>答案：</h4>
                <input type="text" maxlength="18" class="long" v-model="userinfo.results.problemset[item]">
            </li>
        </ul>
        <div class="add" v-if="show">
            <h4>添加一条问题（至多3条）</h4>
            <span @click="count"><i class="iconfont">&#xe60f;</i></span>
        </div>
    </div>
    <div class="ui-form-item ui-form-item-switch ui-border-b switch-box">
        <h4>开启附加单选题</h4>
        <label class="ui-switch">
            <input type="checkbox" value="true" v-model="switchs">
        </label>
    </div>
    <div class="additional" v-if="switchs">
        <h3>单选题</h3>
        <h4>设置问题：</h4>
        <input type="text" maxlength="18" class="long" v-model="userinfo.problem.spoof[0]">
        <h4>正确答案：</h4>
        <input type="text" maxlength="18" v-model="userinfo.problem.spoof[1]">
        <h4>错误答案：</h4>
        <input type="text" maxlength="18" v-model="userinfo.problem.spoof[2]">
    </div>
    <div class="submit">
        <button class="ui-btn-lg-nowhole ui-btn-primary" @click="submit">发布红包</button>
    </div>
    <success v-if="success"/>
</div>
</template>

<script>
import success from '@/components/success'
import {setlist,textFormat} from '@/utils'
const SUCCESS_STATE = false
export default {
data() {
return {
    num:0,
    show:true,
    switchs:false,
    success:SUCCESS_STATE,
    userinfo:{
        // username: '重庆崽儿',
        // headurl: 2769536052,  userid
        backpostion:1,
        text:'恭喜发财',
        coding:'',
        problem:{
            firstchoose:[],
            problemset:[],
            spoof:[]
        },
        results:{
            problemset:[]
        }
        
    }

}
},
components:{
    success
},
//生命周期 - 创建完成（访问当前this实例）
created() {
    this.login()
},
methods:{
    count(){
        this.num++
        if(this.num == 3 ){
            this.show = false
            return;
        }
    },
    isempty(){
        if(
            this.userinfo.problem.firstchoose.length == 3 && 
            this.istextempty(this.userinfo.problem.firstchoose) &&
            this.userinfo.problem.problemset.length >= 1 &&
            this.istextempty(this.userinfo.problem.problemset) &&
            this.istextempty(this.userinfo.results.problemset) &&
            this.userinfo.problem.problemset.length == this.userinfo.results.problemset.length &&
            this.userinfo.coding.toString().length >= 6 &&
            this.userinfo.text.toString().length == 4
            ){
            return true
        }
    },
    problemCount(){
        if(this.switchs){
            if(
                this.userinfo.problem.spoof.length == 3 &&
                this.istextempty(this.userinfo.problem.spoof)
                ){
                return true
            }
            
        }else{
            return true 
        }
    },
    async submit(){
        if(this.isempty() && this.login() && this.problemCount()){

            const resl = await setlist({data:{
                userid: this.$store.state.userid,
                username:this.$store.state.username,
                backpostion: this.userinfo.backpostion,
                text: this.userinfo.text,
                coding: this.userinfo.coding,
                problem: this.dataTextFormat(this.userinfo.problem),
                results: this.resultTextFormat(this.userinfo.results)
            }})

            if(resl.toString() == '200'){
                this.success = true
                this.$store.commit('homelist',{"state":"update"});
                this.$store.commit('uodataUserlist', '');
            }
        }
        
    },
    login(){
        if(this.$store.state.username == ''){
            this.$store.commit('loginMask',true)
        }else{
            return true;
        }
    },
    istextempty(list){
        let state = list.filter((text)=>{
            if (text.toString().length != 0 && text.toString().match(/^[ ]*$/) == null){
                return true
            }
        })
        if(list.length != 0 && list.length == state.length){
            return true
        }
    },
    // textFormat
    dataTextFormat(data){
        let firstchoose = textFormat(data.firstchoose);
        let problemset = textFormat(data.problemset);
        let spoof = textFormat(data.spoof);
        return {firstchoose,problemset,spoof}
    },
    resultTextFormat(data){
        let problemset = textFormat(data.problemset);
        return {problemset}
    }
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

}
}
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.release-setting{
    height: 100%;
    margin: 0 5%;
    overflow: scroll;
    .title{
        text-align: center;
        color: rgb(104, 97, 97);
        padding: 20px 0;
    }
    div{
        h4{
            color: rgb(117, 106, 106);
            font-size: 15px;
            padding: 5px 0;
        }
        h3{
            color: rgb(80, 74, 74);
            font-size: 18px;
            padding: 5px 0;

        }
        P{
            color: rgb(119, 110, 110);
            font-size: 13px;
            padding: 5px 0;
        }
    }
    .choose,.allproblem,.additional{
        padding: 15px 0;
        margin: 5px 0;
        border-bottom: 1px solid  rgba(163, 158, 158, 0.178);
    }
    .allproblem{
        .add{
            display: inline-block;  
            padding: 10px 0;
            span{
                display: inline-block;
                margin-top: 10px;
                .iconfont{
                    display: inline-block;
                    width: 25px;
                    height: 25px;
                    font-size: 25px;
                    color: rgb(26, 157, 218);
                }
            }
            
        }
    }
    input{
        margin: 5px 0;
        padding: 6px 5px;
        border: 1px solid rgba(150, 145, 145, 0.39);
        border-radius: 3px;
        font-size: 14px;
    }
    .long{
        width: 90%;
    }
    .submit{
        padding: 30px 0;
        margin: 0 auto;
        .ui-btn-lg-nowhole{
            width: 90%;
        }
    }
    .switch-box{
        .ui-switch{
            input{
                padding:0;
                border: none;
            }
        }
    }
    .ui-form-item{
        padding: 0;
    }
    .ui-select-group{
        margin-left: 0;
    }
    .ui-select select{
        font-size: 14px;
        border: 1px solid rgba(150, 145, 145, 0.39);
        padding: 5px;
    }
    .ui-select:after{
        right: 15px;
    }
}

.release-setting::-webkit-scrollbar { width: 0 !important }

.release-setting { -ms-overflow-style: none; }

.release-setting { overflow: -moz-scrollbars-none; }
</style>